<template>
  <!-- 新增部门的弹层 -->
  <el-dialog
    :title="this.ChanGen === 0 ? '新增目录' : '修改标签'"
    :visible="isShow"
    width="25%"
    @close="close"
  >
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="所属学科" prop="subjectName" v-if="!Show">
        <el-select
          v-model="ruleForm.subjectName"
          style="width: 80%"
          placeholder="请选择"
          @focus="chang"
        >
          <el-option
            v-for="(item, index) in this.list"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="tagName">
        <el-input v-model.trim="ruleForm.tagName" style="width: 80%" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col>
        <el-button type="primary" size="small" @click="GetData">确定</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/tags.js'
export default {
  name: 'NewDirectory',
  data () {
    return {
      ruleForm: {
        tagName: '',
        subjectName: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '所属学科不能为空', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '标签名称为空', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    ChanGen: {
      type: Number,
      required: true
    },
    NewList: {
      type: Object,
      required: true
    },
    list: {
      type: Array,
      required: true
    },
    Show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    chang (data) {
      console.log(data)
    },
    // 新增
    GetData () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // this.$refs.ruleForm.resetFields()
          try {
            if (this.ChanGen === 0) {
              if (this.$route.query.id !== undefined &&
                this.$route.query.name !== undefined) {
                await add({
                  tagName: this.ruleForm.tagName,
                  subjectID: this.$route.query.id
                })
              } else {
                await add({
                  tagName: this.ruleForm.tagName,
                  subjectID: this.ruleForm.subjectName
                })
              }
            } else {
              if (this.$route.query.id !== undefined &&
                this.$route.query.name !== undefined) {
                await update({
                  id: this.NewList.id,
                  subjectID: this.$route.query.id,
                  tagName: this.ruleForm.tagName
                })
              } else {
                await update({
                  id: this.NewList.id,
                  subjectID: this.ruleForm.subjectName,
                  tagName: this.ruleForm.tagName
                })
              }
            }
            // this.$refs.ruleForm.resetFields()
            this.ruleForm = {
              tagName: '',
              subjectName: ''
            }
            this.$emit('delDepts')
            this.$emit('update:is-show', false)
            console.log(this.NewList)
          } catch (err) {
            console.log(err)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 关闭弹层
    close () {
      this.$emit('update:is-show', false)
      // this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        tagName: '',
        subjectName: ''
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
